<template>
	<div>
		<Scroll class="wrap2">
			<div class="box">
				<!--轮播图-->
				<Swiper v-if="pages.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
					<Slide v-for="(item,index) in pages" :key="index">
						<img :src="item" class="cir" />
					</Slide>
				</Swiper>

				<!--新品上市-->
				<div class="newgoods-top">
					<span class="voice">
			   				<img src="../../assets/F-img/喇叭.png" alt="" />
			   			</span>
					<span>新品上市</span>
					<span>促销大庆</span>
				</div>
				<div class="newgoods">
					<div class="Purchase">
						<div class="Purchase-left">
							<p class="Purchasep1">限时断货</p>
							<br />
							<span class="Imagecenter">
							<img :src="retreat[0]"/>
						</span>

						</div>
						<div class="Purchasetop-right">
							<div class="topright">
								<span class="rightleft-font">
								<p class="Purchasep2">品牌精选</p>
								
							</span>
								<!--	<br />-->
								<img :src="retreat[1]" />
							</div>
							<div class="bottmright">
								<span class="rightleft-font">
								<p class="Purchasep2">超值热卖</p>
								
							</span>
								<!--<br />-->
								<img :src="retreat[2]" />
							</div>
						</div>
					</div>
				</div>
				
				<!--今日推荐-->
				<div class="newgoods-top">
					<span class="voice">
			   				<img src="../../assets/F-img/推荐.png" alt="" />
			   			</span>
					<span>今日推荐</span>
				</div>
				<div class="recomcot" v-for="item in imgcircle">
					<Dcircle :circlecont="item" :circlehide='circlehide' ></Dcircle>
				</div>
				
			</div>
		</Scroll>

	</div>
</template>

<script>
	import Slide from "../../../base/ZSlide"
	import Swiper from "../../../base/ZSwiper"
	import Scroll from "../../../base/Scroll"
	import Dcircle from "../D-goodsKing/circle/Dcircle"
	export default {
		name: "Recommended",
		components: {
			Slide,
			Scroll,
			Dcircle,
			Swiper
		},
		created:function(){
			this.axios.post("/api/recommend").then(function(data){
				this.imgcircle = data.data.allArr.imgcircle;
				this.pages = data.data.allArr.lunboArr;
				this.retreat = data.data.allArr.xinpinArr;
			}.bind(this))
		},
		data() {
			return {
				circlehide: {
					bol: [false, false, false]
				},
				imgcircle: [],
				pages: [],
				retreat: []
			}
		}
	}
</script>

<style scoped>
	.wrap2 {
		overflow: hidden;
		height: 75vh;
		background: #f2f2f2;
	}
	
	.box {
		width: 100%;
		background: #f2f2f2;
	}
	/*轮播图*/
	
	.cir {
		width: 100%;
	}
	/*新品上市*/
	
	.newgoods {
		width: 94%;
		padding: 0 3%;
		background: white;
		border-bottom: 1px solid #b5b5b5;
	}
	
	.newgoods-top {
		border-bottom: 1px solid #ccc;
		width: 94%;
		padding: 0.8rem 3%;
		background: white;
		margin-top: 1rem;
	}
	
	.voice {
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
	}
	
	.voice img {
		width: 100%;
		height: 100%;
	}
	
	.newgoods-top span {
		font-size: 1.4rem;
		vertical-align: middle;
		padding: 0 0.3rem;
		color: #4d4d4d;
	}
	
	.Purchase {
		background-color: white;
	}
	
	.Purchase-left {
		width: 40%;
		border-right: 1px solid #c1c1c1;
		display: inline-block;
		margin-top: 0.6rem;
		margin-bottom: 0.6rem;
	}
	
	.Purchasep1 {
		width: 4.5rem;
		padding: 0.1rem 0;
		text-align: center;
		background: #E53E42;
		color: white;
		font-size: 1rem;
		font-weight: 300;
	}
	
	.Purchasep2 {
		width: 1rem;
		height: 5rem;
		padding: 1rem;
		font-size: 1rem;
		color: #E53E42;
		font-weight: 300;
	}
	
	.Purchase-left img {
		width: 100%;
		text-align: center;
	}
	
	.Purchasetop-right {
		width: 55%;
		display: inline-block;
	}
	
	.rightleft-font {
		display: inline-block;
		margin-left: 0.5rem;
	}
	
	.rightleft-font h3 {
		font-size: 1.3rem;
		color: #d72532;
		font-weight: 400;
		text-align: left;
	}
	
	.topright {
		border-bottom: 1px solid #c1c1c1;
	}
	
	.topright img {
		width: 55%;
		/*margin-left: 8rem;*/
		margin-top: 0.8rem;
		padding-left: 1.5rem;
	}
	
	.bottmright img {
		width: 55%;
		margin-top: 0.7rem;
		padding-left: 1.5rem;
	}
	.recomcot{
		padding-bottom: 1rem;
	}
</style>